<template>
  <div class="app">
    <div ref="screen" class="screen">
      <div class="info">
        <div class="oneScreen" v-if="$i18n.locale == 'zh'">
          <img class="sologin" src="../../assets/home/sologn.png" alt="" />
          <div class="phone"></div>
          <!-- <img class="phone" src="../../assets/home/phone.png" /> -->
          <!-- <div class="booklist">
            <img src="../../assets/home/booklist.png" />
          </div> -->
        </div>
        <div class="oneScreen" v-else>
          <img class="sologin" src="../../assets/home/solognEn.png" alt="" />
          <div class="phoneEn"></div>
          <!-- <img class="phone" src="../../assets/home/phone.png" /> -->
          <!-- <div class="booklist">
            <img src="../../assets/home/booklist.png" />
          </div> -->
        </div>
      </div>
      <!-- <div class="info"></div> -->
      <div class="info infoContent">
        <div class="bookinfoContent">
          <div class="bookInfo">
            <div
              class="bookLeftImg"
              @click="goDetaile(leftId, leftCategoryId1)"
            >
              <img
                class="bookLeftImgNin"
                referrerPolicy="no-referrer"
                :src="leftImg"
              />
            </div>
            <div class="bookLeftInfo">
              {{ leftInfor }}
            </div>
          </div>
          <div class="bookInfo bookInfoOther">
            <div class="bookRightInfo">
              {{ rightInfor }}
            </div>
            <div
              class="bookRightImg"
              @click="goDetaile(rightId, rightCategoryId1)"
            >
              <img
                class="bookRightImgNin"
                referrerPolicy="no-referrer"
                :src="rightImg"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="info autoContent">
        <div class="autoTitle">
          <img
            src="../../assets/home/autoTitle.png"
            v-if="$i18n.locale == 'zh'"
            alt=""
          />
          <img src="../../assets/home/autoTitleEn.png" v-else alt="" />
        </div>
        <div class="autoImg">
          <!-- <img class="pepImg" src="../../assets/home/pe.png" /> -->
        </div>
        <div class="messInfor">
          <h2>{{ $t("home.contractPrice") }}</h2>
          <div>
            <p>{{ $t("home.qualityPayment20") }}</p>
            <p>{{ $t("home.qualityPayment15") }}</p>
            <h2>{{ $t("home.priceIncrease") }}</h2>

            <p>{{ $t("home.outstandingPriceIncrease") }}</p>
            <p>{{ $t("home.outstandingContractAscension") }}</p>
            <h2>{{ $t("home.submissionMailbox") }}</h2>

            <p>
              {{ $t("home.maleFrequencyCoordinatingEditor") }}：{{
                $t("home.noNight")
              }}：3555281182@qq.com 
            </p>
            <p>
              {{ $t("home.femaleFrequencyCoordinatingEditor") }}：{{
                $t("home.mosquito")
              }}：1366560833@qq.com
            </p>
          </div>
        </div>
      </div>
      <div class="info marqueen">
        <div>
          <img
            src="../../assets/home/girlsClass.png"
            v-if="$i18n.locale == 'zh'"
            alt=""
          />
          <img src="../../assets/home/girlsClassEn.png" v-else alt="" />
        </div>
        <!-- 横向轮播--女频精选--开始 -->
        <div class="manList" ref="tag">
          <div class="booklistSport">
            <div
              v-for="(item, index) in girlsList"
              :key="index"
              @click="goDetaile(item.bookId, item.categoryId1)"
              class="booklist_con"
            >
              <img
                :class="classTrue ? 'boyImgItem' : ''"
                :src="item.coverUrl"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>
          <div class="booklistSport nextBookList">
            <div
              v-for="(item, index) in girlsList"
              :key="index"
              @click="goDetaile(item.bookId, item.categoryId1)"
              referrerPolicy="no-referrer"
              class="booklist_con"
            >
              <img
                :class="classTrue ? 'boyImgItem' : ''"
                :src="item.coverUrl"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>
        </div>
        <!-- 横向轮播--女频精选--结束 -->
        <div class="marqueenTitle">
          <img
            src="../../assets/home/manClass.png"
            v-if="$i18n.locale == 'zh'"
            alt=""
          />
          <img src="../../assets/home/manClassEn.png" v-else alt="" />
        </div>
        <!-- 横向轮播--男频精选--开始 -->
        <div class="girlList" ref="tab">
          <div class="girlListSport">
            <div
              v-for="(item, index) in manList"
              :key="index"
              @click="goDetaile(item.bookId, item.categoryId1)"
              class="booklist_con"
            >
              <img
                :class="classTrue ? 'girlImgItem' : ''"
                :src="item.coverUrl"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>
          <div class="girlListSport girlNext">
            <div
              v-for="(item, index) in manList"
              :key="index"
              @click="goDetaile(item.bookId, item.categoryId1)"
              class="booklist_con"
            >
              <img
                :class="classTrue ? 'girlImgItem' : ''"
                :src="item.coverUrl"
                referrerPolicy="no-referrer"
              />
            </div>
            <!-- ' https://images.weserv.nl/?'+ -->
          </div>
        </div>
        <!-- 横向轮播--男频精选--结束 -->
      </div>
    </div>
  </div>
</template>

<script>
import top from "@/components/newHome/top.vue";
import foot from "@/components/home/foot.vue";
import { getShowPage } from "@/api/newHome";
export default {
  data: function () {
    return {
      classTrue: false,
      scrollTopData: "",
      transitionName: "",
      displacementRight: 1,
      phoneLeft: Number, //手机默认left 距离
      sologinLeft: Number, //logo默认left距离
      scrollNum: Number,
      speed: 10,
      defPhoneLeft: Number,
      defSolognLeft: Number,
      leftImg: "",
      leftInfor: "",
      rightId: "",
      leftCategoryId1: "",
      rightCategoryId1: "",
      leftId: "",
      rightImg: "",
      rightInfor: "",
      manList: [],
      girlsList: [],
      manListons: "", //ref代替document字段
      tab: "",
    };
  },
  components: {
    top: top,
    foot: foot,
  },
  methods: {
    goDetaile(id, CategoryId) {
      this.$router.push({
        path: "/bookInfor",
        query: { bookId: id, categoryId: CategoryId },
      });
    },
    moveLeft() {
      // let manList = document.querySelector(".manList");
      // ref使用女频
      let manList = this.manListons;
      var speed = 1;

      function run() {
        if (manList.offsetLeft < -manList.offsetWidth / 2) {
          manList.style.left = 0;
        } else if (manList.offsetLeft > 0) {
          manList.style.left = -manList.offsetWidth / 2 + "px";
        }

        manList.style.left = manList.offsetLeft + speed + "px";
      }
      let timer = setInterval(run, 30);

      manList.onmouseover = function () {
        clearInterval(timer);
      };

      manList.onmouseout = function () {
        timer = setInterval(run, 30);
      };
    },
    moveRight() {
      // let girlList = document.querySelector(".girlList");
      //使用ref男频
      let girlList = this.tab;

      var speed = 1;
      function run() {
        if (girlList.offsetLeft == 0) {
          girlList.style.right = girlList.offsetWidth / 2 + "px";
        } else if (girlList.offsetLeft < 0) {
          girlList.style.left = girlList.offsetWidth / 2 + "px";
        }

        girlList.style.left = girlList.offsetLeft - speed + "px";
      }
      let timer = setInterval(run, 30);

      girlList.onmouseover = function () {
        clearInterval(timer);
      };

      girlList.onmouseout = function () {
        timer = setInterval(run, 30);
      };
    },
    onloadFn() {
      let that = this;
      let sCreenHeight = document.documentElement.clientHeight;
      let sCreenWidth = document.documentElement.clientWidth;
      let screen = document.documentElement.querySelector(".screen");
      let autoImg = document.documentElement.querySelector(".autoImg");
      let sologin = document.documentElement.querySelector(".sologin");
      let phone = document.documentElement.querySelector(".phone");
      let info = document.documentElement.querySelectorAll(".info");
      let oneScreen = document.documentElement.querySelector(".oneScreen");
      // let booklist = document.documentElement.querySelector(".booklist");
      // let manList = document.querySelector(".manList");
      //ref使用
      let manList = this.manListons;
      let girlImgItem =
        document.documentElement.querySelectorAll(".girlImgItem");
      let bookLeftInfo =
        document.documentElement.querySelector(".bookLeftInfo");
      let bookRightInfo =
        document.documentElement.querySelector(".bookRightInfo");
      let bookRightImg =
        document.documentElement.querySelector(".bookRightImg");
      let bookRightImgNin =
        document.documentElement.querySelector(".bookRightImgNin");
      let bookLeftImg = document.documentElement.querySelector(".bookLeftImg");
      let bookLeftImgNin =
        document.documentElement.querySelector(".bookLeftImgNin");
      // 元素动态布局
      // screen.style.height = 4 * sCreenHeight + "px";
      // info.forEach((item) => {
      //   item.style.height = sCreenHeight + "px";
      // });
      oneScreen.style.height = sCreenHeight + "px";
      if (sCreenHeight <= 760) {
        this.classTrue = true;
        phone.style.width = "20%";
        phone.style.height = "70%";
        sologin.style.width = "35%";
        sologin.style.height = "25%";
        autoImg.style.height = sCreenHeight - 100 + "px";
        autoImg.style.width = "50%";
        bookRightImg.style.height = 240 + "px";
        bookRightImgNin.style.height = 240 + "px";
        bookRightImgNin.style.width = 200 + "px";
        bookRightImg.style.width = 200 + "px";
        bookLeftImg.style.width = 200 + "px";
        bookLeftImg.style.height = 240 + "px";
        bookLeftImgNin.style.width = 200 + "px";
        bookLeftImgNin.style.height = 240 + "px";
        manList.style.height = 230 + "px";
      }
      phone.style.left = oneScreen.offsetLeft + 1200 - phone.offsetWidth + "px";
      if (oneScreen.offsetLeft <= 10) {
        sologin.style.left = 140 + "px";
      } else {
        sologin.style.left = oneScreen.offsetLeft + "px";
      }

      this.defPhoneLeft = phone.offsetLeft;
      this.defSolognLeft = sologin.offsetLeft;

      this.speedPhone = phone.offsetLeft;
      this.speedSologn = sologin.offsetLeft;
      //左侧书布局
      // bookLeftImg.style.top = 140 + "px";
      // bookLeftInfo.style.top = 150 + "px";
      // bookLeftInfo.style.left = bookLeftImg.offsetLeft + 266 + 50 + "px";
      //右侧书布局
      // bookRightImg.style.bottom = 40 + "px";
      // bookRightInfo.style.top = bookRightImg.offsetTop + "px";
      // bookRightInfo.style.left = bookRightInfo.offsetLeft - 266 - 50 + "px";

      // 动画参数
      let num = 1;
      let op = 0;
      let bookListmum = 0; //左侧书动画参数
      let bookRightNum = 0; //第一本书介绍动画参数
      let bookRightImgNum = 0; //第二本书动画参数
      let bookRightInfoNum = 0; //第二本书介绍动画参数
      let scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {
          //判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) {
            //当滑轮向上滚动时
            // if (document.documentElement.scrollTop == 0) {
            //   phone.style.left = that.defPhoneLeft + "px";
            //   sologin.style.left = that.defSolognLeft + "px";
            //   that.speedPhone = that.defPhoneLeft;
            //   that.speedSologn = that.defSolognLeft;
            //   return false;
            // } else {
            //   that.speedPhone -= 50;
            //   that.speedSologn += 50;
            //   phone.style.left = that.speedPhone + "px";
            //   sologin.style.left = that.speedSologn + "px";
            // }
            //大小动画
            // if (num >= 1) {
            //   num -= 3;
            //   booklist.style.transform =
            //     "matrix(" + num + ",0,0," + num + ",0,0)";
            // } else {
            //   num = 1;
            //   booklist.style.transform =
            //     "matrix(" + num + ",0,0," + num + ",0,0)";
            // }
            // //大小透明度
            // if (num <= 43 && num >= 15) {
            //   op += 2;
            //   booklist.style.opacity = op / 10;
            // } else {
            //   if (op >= 0) {
            //     op -= 2;
            //   } else {
            //     op = 0;
            //   }
            //   booklist.style.opacity = op / 10;
            // }
            //书详情动画
            // if (num <= 70) {
            //   if (bookListmum <= -266) {
            //     bookListmum = -266;
            //     bookLeftImg.style.left = bookListmum + "px";
            //   } else {
            //     bookListmum -= 50;
            //     bookLeftImg.style.left = bookListmum + "px";
            //   }
            //   //第一本书介绍动画
            //   if (bookRightNum <= -850) {
            //     bookRightNum = -850;
            //     bookLeftInfo.style.right = bookRightNum + "px";
            //   } else {
            //     bookRightNum -= 60;
            //     bookLeftInfo.style.right = bookRightNum + "px";
            //   }
            // }
            // if (num <= 100) {
            //   //第二本书动画
            //   if (bookRightImgNum <= -266) {
            //     bookRightImgNum = -266;
            //     bookRightImg.style.right = bookRightImgNum + "px";
            //   } else {
            //     bookRightImgNum -= 50;
            //     bookRightImg.style.right = bookRightImgNum + "px";
            //   }
            //   //第二本书介绍动画
            //   if (bookRightInfoNum <= -850) {
            //     bookRightInfoNum = -850;
            //     bookRightInfo.style.left = bookRightInfoNum + "px";
            //   } else {
            //     //添加定位fixed
            //     bookRightImg.style.position = "fixed";
            //     bookLeftImg.style.position = "fixed";
            //     bookLeftInfo.style.position = "fixed";
            //     bookRightInfo.style.position = "fixed";
            //     bookRightInfoNum -= 60;
            //     bookRightInfo.style.left = bookRightInfoNum + "px";
            //   }
            // }
          }

          if (e.wheelDelta < 0) {
            //当滑轮向下滚动时
            // that.speedPhone += 50;
            // that.speedSologn -= 50;
            // phone.style.left = that.speedPhone + "px";
            // sologin.style.left = that.speedSologn + "px";
            //大小动画 ，判断滚到可是高度一半触发
            // if (
            //   document.documentElement.scrollTop >=
            //   document.documentElement.clientHeight / 2 - 100
            // ) {
            //   num += 3;
            //   if (num >= 25) {
            //     if (op <= 0) {
            //       op = 0;
            //     } else {
            //       op -= 3;
            //     }
            //   } else {
            //     op += 3;
            //   }
            //   booklist.style.opacity = op / 10;
            //   booklist.style.transform =
            //     "matrix(" + num + ",0,0," + num + ",0,0)";
            // }
            //书详情动画
            // if (num >= 43) {
            //   //第一本书封面动画
            //   if (bookListmum <= oneScreen.offsetLeft) {
            //     bookListmum += 50;
            //     bookLeftImg.style.left = bookListmum + "px";
            //     // bookLeftImg.style.position="static"
            //   } else {
            //     bookListmum = oneScreen.offsetLeft;
            //     bookLeftImg.style.left = bookListmum + "px";
            //   }
            //   //第一本书介绍动画
            //   if (bookRightNum >= oneScreen.offsetLeft) {
            //     bookRightNum = oneScreen.offsetLeft;
            //     bookLeftInfo.style.right = bookRightNum + "px";
            //     // bookLeftInfo.style.position="static"
            //   } else {
            //     bookRightNum += 60;
            //     bookLeftInfo.style.right = bookRightNum + "px";
            //   }
            // }
            //删除定位fixed
            // bookRightImg.style.position = "static";
            // bookLeftImg.style.position = "static";
            // bookLeftInfo.style.position = "static";
            // bookRightInfo.style.position = "static";
            // if (num >= 40) {
            //   //第二本书动画
            //   if (bookRightImgNum >= oneScreen.offsetLeft) {
            //     bookRightImgNum = oneScreen.offsetLeft;
            //     bookRightImg.style.right = bookRightImgNum + "px";
            //   } else {
            //     bookRightImgNum += 50;
            //     bookRightImg.style.right = bookRightImgNum + "px";
            //   }
            //   //第二本书介绍动画
            //   if (bookRightInfoNum >= oneScreen.offsetLeft) {
            //     bookRightInfoNum = oneScreen.offsetLeft;
            //     bookRightInfo.style.left = bookRightInfoNum + "px";
            //   } else {
            //     bookRightInfoNum += 60;
            //     bookRightInfo.style.left = bookRightInfoNum + "px";
            //   }
            // }
          }
        } else if (e.detail) {
          //Firefox滑轮事件
          if (e.detail > 0) {
            //当滑轮向下滚动时
            // console.log("下滚");
            doanimL();
          }
          if (e.detail < 0) {
            //当滑轮向上滚动时
            // console.log("上滚");
          }
        }
      };
      /*IE、Opera注册事件*/
      // if (document.attachEvent) {
      //   document.attachEvent("onmousewheel", scrollFunc);
      // }
      // //Firefox使用addEventListener添加滚轮事件
      // if (document.addEventListener) {
      //   //firefox
      //   document.addEventListener("DOMMouseScroll", scrollFunc, false);
      // }
      //Safari与Chrome属于同一类型
      window.onmousewheel = document.onmousewheel = scrollFunc;
      let scrollData = 0;
      let newData = 0;
      // window.onscroll = function (e) {

      //  scrollData = document.documentElement.scrollTop;

      //   if (newData < scrollData) {
      //     that.speedPhone += 20;
      //     that.speedSologn -= 20;
      //     phone.style.left = that.speedPhone + "px";
      //     sologin.style.left = that.speedSologn + "px";

      //   } else {
      //      that.speedPhone -= 20;
      //     that.speedSologn += 20;
      //     phone.style.left = that.speedPhone + "px";
      //     sologin.style.left = that.speedSologn + "px";
      //         if (document.documentElement.scrollTop == 0) {
      //         phone.style.left = that.defPhoneLeft + "px";
      //         sologin.style.left = that.defSolognLeft + "px";
      //         that.speedPhone = that.defPhoneLeft;
      //         that.speedSologn = that.defSolognLeft;
      //         return false;}
      //   }
      //     setTimeout(function () {
      //     newData = scrollData;
      //   }, 0);
      // };
    },

    getBook(num) {
      getShowPage({ mid: num }).then((res) => {
        if (res.code == 1) {
          if (num == 82) {
            this.leftImg = res.source[0].coverUrl;
            this.leftInfor = res.source[0].bookIntro;
            this.leftId = res.source[0].bookId;
            this.leftCategoryId1 = res.source[1].categoryId1;
            this.rightImg = res.source[1].coverUrl;
            this.rightInfor = res.source[1].bookIntro;
            this.rightId = res.source[1].bookId;
            this.rightCategoryId1 = res.source[1].categoryId1;
          }
          if (num == 80) {
            this.girlsList = res.source;
          }
          if (num === 81) {
            this.manList = res.source;
          }
        }
      });
    },
  },

  mounted() {
    let manList = this.$refs.tag;
    // console.log(manList, 11);
    // console.log(document.querySelector(".manList"),22)
    this.manListons = manList;
    // console.log(document.querySelector(".girlList"),'男1')
    let tab = this.$refs.tab;
    this.tab = tab;
    // console.log(tab,'男2')
    this.moveLeft();
    this.getBook(82);
    this.getBook(80);
    this.getBook(81);
    this.moveRight();
    return;
    this.onloadFn();
    this.moveLeft();
    this.moveRight();
  },
};
</script>
<style lang="scss" scoped="scoped">
.screen {
  background-color: #000;
}
.booklist_con {
  cursor: pointer;
}
.info {
  width: 1200px;
  margin: 0 auto;
}
.infoContent {
  position: relative;
  z-index: 100;
}
body {
  background-color: #000;
}
.marqueen {
  padding-top: 8rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.marqueenTitle {
  margin-top: 30px;
  text-align: right;
}
.manList {
  margin-top: 2rem;
  position: relative;
  left: -2400px;
  height: 18rem;
}
.girlList {
  margin-top: 2rem;
  position: relative;
  right: -1200px;
  height: 23rem;
}

.booklistSport,
.girlListSport {
  width: 1200px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  img {
    width: 213px;
    height: 285px;
    border-radius: 26px;
  }
}
.booklistSport .boyImgItem {
  width: 160px;
  height: 190px;
}
.girlListSport .girlImgItem {
  width: 160px;
  height: 190px;
}
.nextBookList {
  right: -1200px;
}
.girlNext {
  right: 1200px;
}
.booklistSport > div,
.girlListSport > div {
  margin-left: 10px;
}
.messInfor {
  flex: 1;
}
// .autoImg img {
//   width: 371px;
//   height: 923px;
// }
.autoImg {
  // display: flex;
  // justify-content: space-around;
  width: 400px;
  height: 722px;
  background: url("../../assets/home/pe.png") no-repeat;
  background-size: contain;
}
.autoContent {
  position: relative;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    color: #fff;
    font-size: 18px;
    line-height: 45px;
  }
  .autoTitle {
    position: absolute;
    right: 50px;
    top: 120px;
    img {
      width: 197px;
      height: 46px;
    }
  }
}
.bookinfoContent {
  padding: 120x 0 !important;
}

.bookLeftImg,
.bookRightImg {
  border-radius: 36px;
  overflow-x: hidden;
  width: 266px;
  height: 356px;
  transition: all 0.3s ease-in-out;
}
.bookLeftImg {
  left: -266px;
  img {
    width: 266px;
    height: 356px;
  }
}
.bookRightImg {
  right: -266px;
  img {
    width: 266px;
    height: 356px;
  }
}
.bookLeftInfo {
  right: -850px;
}
.bookRightInfo {
  left: -850px;
}
.bookLeftInfo,
.bookRightInfo {
  color: #fff;
  transition: all 0.3s ease-in-out;
  // position: fixed;
  width: 850px;
  font-size: 18px;
  line-height: 45px;
}
.bookinfoContent {
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 110px;
}
.bookInfo {
  display: flex;
  justify-content: space-around;
}
.bookInfoOther {
  margin-top: 80px;
  display: flex;
  justify-content: space-around;
  // justify-content: flex-end;
  //  padding-bottom:80px
}
.oneScreen {
  width: 100%;
  // height: 450px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}
.booklist {
  position: fixed;
  color: #ccc;
  font-size: 24px;
  position: fixed;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.booklist img {
  width: 145.1px;
  height: 99.1px;
}
.sologin {
  width: 567px;
  height: 207px;
  // position: fixed;
  transition: all 0.3s ease-out;
}
.phone {
  // position: fixed;
  width: 377px;
  height: 560px;
  transition: all 0.3s ease-out;
  background: url("../../assets/home/phone.png") no-repeat right;
  background-size: contain;
}
.phoneEn {
  // position: fixed;
  width: 377px;
  height: 560px;
  transition: all 0.3s ease-out;
  background: url("../../assets/home/phoneEn.png") no-repeat right;
  background-size: contain;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top: 0;
}
</style>
